<template>
    <div style="height:100%;width:100%;text-align:left;">
        <div ref="basicMapbox" style="position:absolute; width: 100%;height:100%;top: 0px; bottom:0px; left: 0px" id="mapCotainer"></div>
    </div>
</template>
<script>
    import mapboxgl from "mapbox-gl"
    import MapboxLanguage from '@mapbox/mapbox-gl-language'
    import 'mapbox-gl/dist/mapbox-gl.css'
    import global from "../global.vue";


    export default {
        data() {
            return {
                layerInfo: [],
                layerStyle: [],
                map:{}
            }
        },
        mounted() {
            this.init()
        },
        props:{
            menuSelectNum: {
                type: Number,
                default: function () {
                    return 1
                }
            }},
        methods: {
            // 初始化
            init() {
                mapboxgl.accessToken = 'pk.eyJ1IjoibGl5dWV5aSIsImEiOiJjanpkZmh1aGswMW91M3Bsa2ZxZmFpNGtjIn0.3O_iLJM7u3UyEyGBVKt1ug';
                this.map = new mapboxgl.Map({
                    container: 'mapCotainer',
                    style: 'mapbox://styles/mapbox/streets-v9',
                    // style: {
                    //     "version": 8,
                    //     "sources": {
                    //         "raster-tiles": {
                    //             "type": "raster",
                    //             "tiles" : ["http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=872babdf4f3f70fac31da23c0f93597e"],
                    //             //"tiles" : ["https://t0.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=872babdf4f3f70fac31da23c0f93597e"],
                    //             //"tiles" : ["https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=872babdf4f3f70fac31da23c0f93597e"],
                    //             //"tiles" : ["https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=872babdf4f3f70fac31da23c0f93597e"],
                    //             "tileSize": 256,
                    //             "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
                    //         }
                    //     },
                    //     "layers": [{
                    //         "id": "simple-tiles",
                    //         "type": "raster",
                    //         "source": "raster-tiles",
                    //         "minzoom": 0,
                    //         "maxzoom": 22
                    //     }]
                    // },
                    // center: [-73.95, 40.78],
                    // zoom: 15,
                    // pitch: 45,
                    // bearing: -17.6,
                    center: [121.64, 29.70],
                    zoom: 4,
                    // center: [-68.13734351262877, 45.137451890638886],
                    // zoom: 5
                });

                // window.map = global.map;

                // 设置语言
                var language = new MapboxLanguage({defaultLanguage: "zh"});
                this.map.addControl(language);
                // 地图导航
                var nav = new mapboxgl.NavigationControl();
                this.map.addControl(nav, "top-left");
                // 比例尺
                var scale = new mapboxgl.ScaleControl({
                    maxWidth: 80,
                    unit: "imperial"
                });
                this.map.addControl(scale);
                scale.setUnit("metric");
                /*
                // 全图
                global.map.addControl(new mapboxgl.FullscreenControl());
                // 定位
                global.map.addControl(
                    new mapboxgl.GeolocateControl({
                        positionOptions: {
                            enableHighAccuracy: true
                        },
                        trackUserLocation: true
                    })
                );
*/

                this.map.on('load', function () {

                });
            },
            changeMap(index) {
                //根据获取的值加载不同的地图，在实际使用时根据传参请求不同的后端地图数据
               this.map.remove();
                if (index == 11){
                     this.map = new mapboxgl.Map({
                        container: 'mapCotainer',
                        style: 'mapbox://styles/mapbox/streets-v9',
                        center: [-88.13734351262877, 35.137451890638886],
                        zoom: 4
                    });
                    this.setMapParms();
/*                    this.map.on('load', function () {
                        this.map.addSource('urban-areas', {
                            'type': 'geojson',           /!* geojson类型source *!/
                            'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_urban_areas.geojson' /!* 数据来源url *!/
                        });

                        this.map.addLayer({
                            'id': 'urban-areas-fill',    /!* layer ID *!/
                            'type': 'fill',              /!* fill类型layer *!/
                            'source': 'urban-areas',
                            'layout': {},
                            'paint': {
                                'fill-color': '#f08',    /!* fill颜色 *!/
                                'fill-opacity': 0.4      /!* fill透明度 *!/
                            }
                            // This is the important part of this example: the addLayer
                            // method takes 2 arguments: the layer as an object, and a string
                            // representing another layer's name. if the other layer
                            // exists in the stylesheet already, the new layer will be positioned
                            // right before that layer in the stack, making it possible to put
                            // 'overlays' anywhere in the layer stack.
                        }, 'water');                    /!* 在id为water的layer之前添加该layer *!/
                    });*/

                    /*                    this.map.addLayer({
                                            container: 'mapCotainer',
                                            style: 'mapbox://styles/mapbox/streets-v10',
                                            center: [127.64, 33.70],
                                            zoom: 8,
                                            });*/
                }
                if(index==12){
                    this.map = new mapboxgl.Map({
                        container: 'mapCotainer',
                        style: 'mapbox://styles/mapbox/satellite-v9',
                        zoom: 0
                    });
                    this.setMapParms();
/*                    this.map.on('load', function () {
// We use D3 to fetch the JSON here so that we can parse and use it separately
// from GL JS's use in the added source. You can use any request method (library
// or otherwise) that you want.
                        d3.json('https://docs.mapbox.com/mapbox-gl-js/assets/hike.geojson', function(err, data) {
                            if (err) throw err;

// save full coordinate list for later
                            var coordinates = data.features[0].geometry.coordinates;

// start by showing just the first coordinate
                            data.features[0].geometry.coordinates = [coordinates[0]];

// add it to the map
                            this.map.addSource('trace', { type: 'geojson', data: data });
                            this.map.addLayer({
                                "id": "trace",
                                "type": "line",
                                "source": "trace",
                                "paint": {
                                    "line-color": "yellow",
                                    "line-opacity": 0.75,
                                    "line-width": 5
                                }
                            });

// setup the viewport
                            this.map.jumpTo({ 'center': coordinates[0], 'zoom': 14 });
                            this.map.setPitch(30);

// on a regular basis, add more coordinates from the saved list and update the map
                            var i = 0;
                            var timer = window.setInterval(function() {
                                if (i < coordinates.length) {
                                    data.features[0].geometry.coordinates.push(coordinates[i]);
                                    this.map.getSource('trace').setData(data);
                                    this.map.panTo(coordinates[i]);
                                    i++;
                                } else {
                                    window.clearInterval(timer);
                                }
                            }, 10);
                        });
                    });*/
                }
            },
            setMapParms(){
                // 设置语言
                var language = new MapboxLanguage({defaultLanguage: "zh"});
                this.map.addControl(language);
                // 地图导航
                var nav = new mapboxgl.NavigationControl();
                this.map.addControl(nav, "top-left");
                // 比例尺
                var scale = new mapboxgl.ScaleControl({
                    maxWidth: 80,
                    unit: "imperial"
                });
                this.map.addControl(scale);
                scale.setUnit("metric");
            }
        },
        watch: {
            menuSelectNum(val) {
              //  console.log("获取值:"+val);
                this.changeMap(val);
            }
        },
        computed: {},
    }
</script>

<style>
    @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');

    .map-overlay {
        font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
        position: absolute;
        width: 15%;
        top: 0;
        left: 3%;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay label {
        display: block;
        margin: 0 0 10px;
    }

    .map-overlay input {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0;
        cursor: ew-resize;
    }

    .map-overlay-inner fieldset {
        border: none;
        padding: 0;
        margin: 0 0 10px;
    }

    .map-overlay-inner fieldset:last-child {
        margin: 0;
    }

    .map-overlay-inner select {
        width: 100%;
    }

    .map-overlay-inner label {
        display: block;
        font-weight: bold;
        margin: 0 0 5px;
    }

    .map-overlay-inner button {
        display: inline-block;
        width: 36px;
        height: 20px;
        border: none;
        cursor: pointer;
    }

    .map-overlay-inner button:focus {
        outline: none;
    }

    .map-overlay-inner button:hover {
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.10);
    }

</style>